<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
  <head>
    <title>관리자 로그인 페이지</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ko"></script>
	<script type="text/javascript">
	
	
	
	
	$(document).ready(function(){
			$.mobile.fixedToolbars
			  .setTouchToggleEnabled(false);
			
			initialize();
			//get_address();
	});
	
	
	  
	  var marker;
	  var map;
	  var current_loc;
	  var geocoder;

	  function initialize() {
	
		  
	  geocoder = new google.maps.Geocoder();
		  
	  navigator.geolocation.getCurrentPosition(function(position) {
		    current_position = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		    //current_position = new google.maps.LatLng(37.566535, 126.977969);
		    
		    
		    var mapOptions = {
		  	      zoom: 16,
		  	      mapTypeId: google.maps.MapTypeId.ROADMAP,
		  	      center: current_position
		  	    };

		  	    map = new google.maps.Map(document.getElementById("map_canvas"),
		  	            mapOptions);
		  	    
		  	  marker = new google.maps.Marker({
			      map:map,
			      draggable:false,
			      animation: google.maps.Animation.DROP,
			      position: current_position
			    });
			    //google.maps.event.addListener(marker, 'click', toggleBounce);
			    
			    google.maps.event.addListener(map, 'click', function(event) {
			    	 
			    	//marker.setPosition(event.latLng);
			    	marker.setPosition(event.latLng);
			    	map.setCenter(event.latLng);
			    	map.setZoom(16);
			    	
			    	//alert(event.latLng.lat());
			    	$('#store_loc_gps_1').val(event.latLng.lat());
			    	$('#store_loc_gps_2').val(event.latLng.lng());
			    	//test
			    	codeLatLng();
//			    	map.setZoom(16);
			    });

		    
	    });
	    	          
	  };
	  
	  
	  
	  
	//gps -> 주소
	function codeLatLng() {
		var input_1 = parseFloat( document.getElementById("store_loc_gps_1").value );
		var input_2 = parseFloat( document.getElementById("store_loc_gps_2").value );
		var latlng = new google.maps.LatLng(input_1, input_2);
		geocoder.geocode({'latLng': latlng}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[1]) {
					map.setZoom(16);
					
					marker.setOptions({
						map:null,
						visible:false
					});
					marker = null;
					
					marker = new google.maps.Marker({
					position: latlng,
					map: map
				});
				document.getElementById('store_loc').value = results[0].formatted_address.replace('대한민국 ','');
				infowindow.setContent(results[1].formatted_address);
				infowindow.open(map, marker);
				}
			} else {
			alert("Geocoder failed due to: " + status);
			}
		});
	}
	  
	  
	  //주소 -> gps
	  function codeAddress() {
		    var address = document.getElementById("store_loc").value;
		    geocoder.geocode( { 'address': address}, function(results, status) {
		      if (status == google.maps.GeocoderStatus.OK) {
		        map.setCenter(results[0].geometry.location);
		        marker.setOptions({
					map:null,
					visible:false
				});
				marker = null;
		        marker = new google.maps.Marker({
		            map: map, 
		            position: results[0].geometry.location
		        });
		      } else {
		        alert("Geocode was not successful for the following reason: " + status);
		      }
	 });
	  //샘플주소 http://code.google.com/intl/ko/apis/maps/documentation/javascript/examples/geocoding-simple.html
	
	  
	  function handleNoGeolocation(errorFlag) {
		    if (errorFlag == true) {
		      alert("지도 서비스 동작중 오류가 발생하였습니다..");
		      
		    } else {
		      alert("위치정보를 지원하지 않는 기기로 접속하였습니다..");
		    }
		    map.setCenter(new google.maps.LatLng(37.566535, 126.977969));
	  }
	  function toggleBounce() {

	    if (marker.getAnimation() != null) {
	      marker.setAnimation(null);
	    } else {
	      marker.setAnimation(google.maps.Animation.BOUNCE);
	    }
	  }
	 }
	 
		
		
	</script>
	<style type="text/css">

		input[type=text]{
			height:10px; width:200px
		}
		
	
		td{
			border:#999 solid 1px;
			border-radius: 10px;
			font-size:6;
		}
		
		#collapse{
			border-style: none;
			border-spacing:10px;
			border-width : 1px;
		}
		#dashed{
			border-style: dashed;
			border-spacing:10px;
			border-width : 1px;
			width: 400px;
			height: 100%;
			text-align:center;
		}
		
	</style>
  </head>
  <body>
  	<section data-role="page" id="login" data-fullscreen="false">
		<header data-role="header" style="position:relative;height:35px;">
  			관리자 페이지
  			<a class="ui-btn-right jqm-home ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-f" data-direction="reverse" data-iconpos="notext" data-icon="home" href="../index.html" title="Home" data-theme="f">
				<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
					<span class="ui-btn-text">Home</span>
					<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
				</span>
			</a>
  		</header>
  		<div class="contents" data-role="content" style="position:relative;">
  			<form name="login" method="post" action="<c:out value="${pageContext.request.contextPath }"/>/index.html">
		  			<div style=" background-color: #FFFFFF; height:100%; width:400px; margin-top :5px; position:relative;">
		  				<div id="dashed">
			  				<table  id="collapse">
			  					<colgroup>
			  						<col width="100px">
			  						<col width="300px">
			  					</colgroup>
			  					<tr>
			  						<td>아이디</td>
			  						<td>
			  							<input type="text" name="user_id">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td>비밀번호</td>
			  						<td>
			  							<input type="text" name="user_pwd" style="">
			  						</td>
			  					</tr>
			  				</table>
			  				<a href="#join" data-role="button" data-inline="true" data-inline="true" data-icon="plus">가입</a>
				  			<input type="submit" name="login_button" value="로그인" data-inline="true" data-icon="check">
							<input type="reset" name="reset_button" value="취소" data-inline="true" data-icon="refresh">
						</div>
					</div>
  			</form>
  		</div>
  		
  		<footer data-role="footer" data-position="fixed">
			<h3>test footer</h3>
		</footer>
    </section>
    
    <section data-role="page" id="join" data-fullscreen="false">
		<header data-role="header" style="position:relative;height:35px;">
  			관리자 - 회원가입
  			<a class="ui-btn-right jqm-home ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-f" data-direction="reverse" data-iconpos="notext" data-icon="home" href="../index.html" title="Home" data-theme="f">
				<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
					<span class="ui-btn-text">Home</span>
					<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
				</span>
			</a>
  		</header>
  		<div class="contents" data-role="content" style="position:relative;">
  			<form name="login" method="post" action='<c:out value="${SPRINGMVC }"/>/mng/insert_mng_join'>
		  			<div style=" background-color: #FFFFFF; height:100%; width:400px; margin-top :5px; position:relative;">
		  				<div id="dashed">
			  				<table  id="collapse">
			  					<colgroup>
			  						<col width="100px">
			  						<col width="300px">
			  					</colgroup>
			  					<tr>
			  						<td>아이디</td>
			  						<td>
			  							<input type="text" name="store_id" id="store_id">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td>비밀번호</td>
			  						<td>
			  							<input type="text" name="store_pwd" id="store_pwd">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td>비밀번호(확인)</td>
			  						<td>
			  							<input type="text" name="user_pwd_chck" style="">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td>지역</td>
			  						<td>
			  							<input type="text" name="store_loc" id="store_loc" value="" onkeyup="if(event.keyCode==13){codeAddress();}">
<!-- 			  							<input type="button" value="역변환" onclick="codeLatLng();"> -->
<!-- 			  							<input type="button" value="변환" onclick="codeAddress();"> -->
			  							<input type="hidden" name="store_loc_gps_1" id="store_loc_gps_1" value="">
			  							<input type="hidden" name="store_loc_gps_2" id="store_loc_gps_2" value="">
			  							
			  							<div id="map_canvas" style="width:300px; height: 250px;">
			  								
			  								
			  							</div>
			  						</td>
			  					</tr>
			  				</table>
			  					<input type="submit" data-inline="true" data-inline="true" data-icon="plus" value="확인">
								<input type="reset" name="reset_button" value="취소" data-inline="true" data-icon="refresh">
						</div>
					</div>
  			</form>
  		</div>
  		
  		<footer data-role="footer" data-position="fixed">
			<h3>test footer</h3>
		</footer>
    </section>
    
		
    
  </body>
</html>